<!DOCTYPE html>
<html lang="en">
<!-- 消防物资类型 -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打卡规则设置</title>
    <link rel="icon" href="../static/img/icon.png">
    <link rel="stylesheet" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" href="../static/css/animate.min.css">
    <link rel="stylesheet" href="../static/css/style.css">

    <style>
        .contain-table-list {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .contain-header {
            width: 100%;
            height: 6%;
            display: flex;
            align-items: center;
            font-size: 0.16rem;
            color: #56F4FE;
        }

        .contain-header ::before {
            content: '';
            display: inline-block;
            width: 0.04rem;
            height: 0.15rem;
            background: #56F4FE;
            margin: 0 0.08rem 0 0.3rem;
        }

        .layui-inline.layui-col-md3 {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .layui-inline input {
            /* width: 70%; */
            letter-spacing: 0.02rem;
        }

        .layui-col-md2 {
            height: 0.6rem;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .layui-col-md2 label {
            font-size: 0.18rem;
        }

        .table-add {
            height: 0.4rem;
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
        }

        .layui-form-checkbox>i {
            border-color: #637379;
            color: #c2c2c2;
        }

        .layui-form-checked>.checkbox-div {
            background-color: #16b777;
        }

        .layui-form-checkbox {
            background-color: #0d2d39;
        }

        .layui-form-checkbox>div {
            background-color: #637379;
        }

        .mutl-col .layui-form-checked>i {
            color: #16b777 !important;
            border-color: #16b777;
        }

        .layui-form-checkbox[lay-skin="primary"]>div {
            color: #c2c2c2;
        }

        .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
            margin: 0;
        }

        .phone-icon {
            width: 0.35rem;
            height: 0.28rem;
            cursor: pointer;
            transition: all 0.3s;
        }

        .phone-icon:hover {
            filter: drop-shadow(1px 1px 3px #24c1ff);
        }

        .phone-list>.layui-col-md12 {
            display: flex;
            align-items: center;
            height: 0.6rem;
        }

        .layui-input-suffix {
            right: -0.1rem;
        }

        .layui-input-affix .layui-icon {
            color: #ddd;
        }

        /* .table-add img {
            width: 0.4rem;
            height: 0.32rem;
            margin: 0;
        } */
    </style>
</head>

<body>
    <div class="app" style="overflow: hidden;">
        <div class="header animate__animated animate__slideInDown">
            <div class="header-title">训战研判系统平台</div>
            <div class="header-menu">

            </div>
        </div>
        <div class="contain">
            <div class="contain-menu animate__animated animate__slideInLeft">

            </div>
            <div class="contain-table">
                <div class="contain-table-list">
                    <div class="contain-header">
                        <span style="display: flex;align-items: center;">打卡配置</span>
                    </div>
                    <form class="layui-form" action="" lay-filter="ruleForm">
                        <div class="layui-inline layui-col-md12" style="padding-top: 0.3rem;">
                            <div class="layui-col-md2">
                                <label for="">打卡时段设置：</label>
                            </div>
                            <div class="layui-col-md8 layui-col-space1 time-list">
                            </div>
                            <div class="layui-col-md2" style=" justify-content: center;">
                                <span class="table-add layui-btn" id="addRangeTime">
                                    添加时段
                                </span>
                            </div>
                        </div>
                        <div class="layui-inline layui-col-md12" style="padding-top: 0.3rem;">
                            <div class="layui-col-md2">
                                <label for="">是否启用短信语音通知：</label>
                            </div>
                            <div class="layui-col-md8 mutl-col">
                                <div class="layui-form-item layui-inline layui-col-md4 layui-padding-2">
                                    <input type="checkbox" name="notice" value="" lay-skin="tag"
                                        lay-filter="notice-filter">
                                    <div lay-checkbox class="checkbox-div">启用</div>
                                </div>
                            </div>
                        </div>
                        <div class="isNotice layui-inline layui-col-md12" style="padding-top: 0.1rem;">
                            <div class="layui-col-md2">
                                <label for="">启用通知类型：</label>
                            </div>
                            <div class="layui-col-md8">
                                <div class="layui-form-item layui-inline layui-col-md4 layui-padding-2"
                                    style="display: flex;align-items: center;height: 0.6rem;">
                                    <input type="checkbox" name="notifySms" title="短信">
                                    <input type="checkbox" name="notifyVms" title="语音">
                                </div>
                            </div>
                        </div>
                        <div class="isNotice layui-inline layui-col-md12" style="padding-top: 0.1rem;">
                            <div class="layui-col-md2">
                                <label for="">值班班长：</label>
                            </div>
                            <div class="layui-col-md8">
                                <div class="layui-form-item layui-inline layui-col-md8 layui-padding-2"
                                    style="display: flex;align-items: center;height: 0.6rem;">
                                    <input type="text" name="linkMan" readonly placeholder="请输入" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="isNotice layui-inline layui-col-md12" style="padding-top: 0.1rem;">
                            <div class="layui-col-md2">
                                <label for="">联系方式：</label>
                            </div>
                            <div class="layui-col-md8 phone-list">
                                <div class="layui-form-item layui-inline layui-col-md12 layui-padding-2">
                                    <input type="text" name="linkPhone" readonly placeholder="多手机号右侧添加，上限3个"
                                        class="layui-input phone-list-input">
                                    <img id="addPhone" style="display: none;" class="phone-icon"
                                        src="../static/img/add.png" title="添加通知号码,最多三个">
                                </div>
                            </div>
                        </div>
                        <div
                            style="width: 16.666666%;margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;">
                            <div class="layui-btn" lay-submit lay-filter="search">
                                <img src="../static/img/icon1.png">保存配置
                            </div>
                        </div>
                        <!--  <button type="reset" id="resetSearch"
                            class="layui-btn layui-btn-primary btn-reset layui-hide">重置</button> -->
                    </form>
                </div>
            </div>

        </div>
    </div>



    <script type="text/javascript" src="../static/js/util/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.js"></script>
    <script type="text/javascript" src="../static/js/biz/clockRule.js"></script>
</body>

</html>